<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- v-show底层实现是display:none 适合切换高频率-->
    <h2 v-show="noShow">{{name}}</h2>

    <!-- v-if直接把节点干没了 适合切换低频率 这几个一定要连贯放在一起-->
    <h2 v-if="n===0">{{name}}</h2>
    <h2 v-else-if="n===1">{{name}}拉拉</h2>
    <h2 v-else>{{name}}啊啊啊</h2>
</div>
<script>
    Vue.config.productionTip = false;

    new Vue({
        el: "#root",
        data: {
            name: '这是测试文字',
            noShow: false,
            n: 0,
        }
    });
</script>
</body>
</html>